<!-- src/components/TodoItem.vue -->
<template>
    <div 
      class="todo-item"
      :class="{ 'completed': todo.completed }"
    >
      <input 
        type="checkbox" 
        class="todo-checkbox" 
        v-model="todoCompleted"
      >
      <span class="todo-text">{{ todo.text }}</span>
      <button class="todo-delete" @click="handleRemove">删除</button>
    </div>
  </template>
  
  <script>
  import { computed } from 'vue';
  
  export default {
    name: 'TodoItem',
    props: {
      todo: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      }
    },
    emits: ['update:todo', 'remove'],
    setup(props, { emit }) {
      const todoCompleted = computed({
        get: () => props.todo.completed,
        set: (value) => {
          const updatedTodo = { ...props.todo, completed: value };
          emit('update:todo', updatedTodo);
        }
      });
  
      const handleRemove = () => {
        emit('remove', props.index);
      };
  
      return {
        todoCompleted,
        handleRemove
      };
    }
  }
  </script>